<template>
	<rx-dialog class="rightDesign" @ok="handleSubmit" @cancel="cancel">

				<div class="drill-down-common">
					<div class="drill-common-le">
						<div style="width: 100%;height: 100%" :style="drillStyle()">
							<!-- 控件内容-->
							<chart-view v-if="drillDownConfig.chartType!='map'" :config="drillDownConfig" :screenConfig="screenConfig"></chart-view>
							<map-view v-else :config="drillDownConfig" :screenConfig="screenConfig" ></map-view>
						</div>
					</div>
					<div class="drill-common-ri drill-down-config">
						<chartDef style="height: 100%" v-if="drillDownConfig.chartType!='map'" :config="drillDownConfig" :screenConfig="screenConfig" :curComponent="curComponent" :isDialog="true"></chartDef>
						<map-def style="height: 100%" v-else :config="drillDownConfig" :screenConfig="screenConfig" :curComponent="curComponent" :isDialog="true"></map-def>
					</div>
				</div>

	</rx-dialog>
</template>

<script>
/*
	下钻图表配置弹窗
 */

import {Util,RxDialog,RxLayout } from "@lowcode/jpaas-base-lib";
import { defineAsyncComponent } from 'vue';


export default {
	name: "drill-down-config-dialog",
	components: {
        RxDialog,
        RxLayout,
        ChartView:defineAsyncComponent(()=>import('@/views/modules/preview/components/chart-view.vue')),
        MapView:defineAsyncComponent(()=>import('@/views/modules/preview/components/map-view.vue')),
        MapDef:defineAsyncComponent(()=>import('@/views/modules/design/right-component/map-def.vue')),
        ChartDef:defineAsyncComponent(()=>import('@/views/modules/design/right-component/chart-def.vue')),
	},
	props:{
		//下钻配置
		config: {
			type: Object
		},
		curComponent: {
			type: Object
		},
		screenConfig: {
			type: Object
		},
		layerid: {
			type: String,
			default: ""
		},
		destroy: {
			type: Function
		},
	},
	data() {
		return {
			drillDownConfig:""
		}
	},
	created(){
		this.drillDownConfig=this.config;
	},
	methods:{
		handleSubmit() {
			Util.closeWindow(this, "ok",this.drillDownConfig);
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
        drillStyle(){
            let style = {};
            if(this.screenConfig.globalConfig.mode=="dark"){
                let img = import.meta.env.JPAAS_BASE_URL + '/image/background/dark'+this.screenConfig.globalConfig.bgImage+'.png';
                style = {background:'url('+img+')'};
            }else {
                let img = import.meta.env.JPAAS_BASE_URL + '/image/background/light'+this.screenConfig.globalConfig.bgImage+'.png';
                style = {background:'url('+img+')'};
            }
            return style
        }
	}
}
</script>

<style scoped>
.drill-down-common{
	display: flex;
	width: 100%;
	height: 100%;
}
.drill-common-le{
	flex: 1;
	border-right: 1px solid #b6b1b1;
}
.drill-common-ri{
	width: 420px;
	height: 100%;
   padding-left: 10px;
}
.drill-common-ri>>>.ant-tabs-tabpane-active{
    padding: 0px 10px;
}
.drill-common-ri >>>.dataSources-common-left,.drill-common-ri >>>.dataSources-common-right{
	height: calc(100% - 60px) !important;
}
.drill-down-config >>>.chart-tooltip,.drill-down-config>>>.chart-enlarge{
	padding: 0px 10px;
}
</style>
